<template>
  <div>
    <screen  height="75px" lineHeight="75px">
      <div class="Juxtaposition">
        <div>
          <el-select v-model="value"  filterable placeholder="请选择充电桩">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          ></el-date-picker>
        </div>
        <div class="btn">
            <el-button @click="historyQuery">查询</el-button>
            <el-button @click="historyReset">重置</el-button>
            <el-button @click="historyExport">导出excel</el-button>
        </div>
      </div>
    </screen>

  </div>
</template>
<script>
import screen from "@/components/screen";
export default {
  components: {
    screen
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "充电桩1"
        },
        {
          value: "选项2",
          label: "充电桩2"
        },
        {
          value: "选项3",
          label: "充电桩3"
        },
        {
          value: "选项4",
          label: "充电桩4"
        },
        {
          value: "选项5",
          label: "充电桩5"
        }
      ],
      value: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ""
    };
  },
  methods: {
      historyQuery(){

      },
      historyReset(){

      },
      historyExport(){
          this.$emit("historyExport")
      }
  }
};
</script>
<style  scoped>
.Juxtaposition {
    display: flex;
}
.Juxtaposition>div {
    margin-left: 30px;
}
.Juxtaposition .btn {
    margin-left:160px;
}

.el-button {
  background: #1d938d;
  color: #fff;
  padding: 8px 20px;
  vertical-align: middle;

}
/deep/ .el-input__inner {
    border-radius: 0;
    height: 34px;
    line-height: 34px;
    vertical-align: middle;
    color:#fff;
}
/deep/ .el-date-editor .el-range-separator{
    line-height: 27px;
}
/deep/ .el-date-editor .el-range__icon {
    line-height: 25px;
}
/deep/ .el-date-editor .el-range-input{
  color:#fff;
}
</style>